<template>
  <mv option="1" limit="12" title="最新MV" />
  <mv option="2" limit="10" @handleMv2="handleMv2" title="推荐MV" />
  <div class="recommend">
    <div v-for="(item, i) in mv2" :key="item.id">
      <div class="iconDiv">
        <svg class="icon">
          <use xlink:href="#icon-MV"></use>
        </svg>
        <p>{{ item.score }}</p>
      </div>

      <p>{{ i + 1 }}</p>
      <img :src="item.cover" alt="" />
      <div class="write">
        <p>{{ item.name }}</p>
        <p>{{ item.artistName }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import mv from "./mv.vue";
const mv2 = reactive<Mv[]>([]);
const handleMv2 = (mvv?: any) => {
  mv2.length = 0;
  mv2.push(...mvv);
};
</script>

<style scoped lang="less">
.recommend {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  > div {
    position: relative;
    width: 200px;
    margin-bottom: 20px;
    flex: 49%;
    display: flex;
    align-items: center;
    padding-left: 10px;
    .iconDiv {
      color: #fff;
      position: absolute;
      top: 10px;
      margin-left: 150px;
      display: flex;
    }
    > img {
      width: 200px;
      height: 110px;
      margin: 0 20px;
    }
    > .write {
      height: 65px;
    }
  }
}
</style>
